<template>
	<view class="bgccc">
		<u-toast ref="uToast" />
		<view class="u-p-30 u-flex u-row-between bgfff mb-20 DetailMsg">
			<u-rate :count="5"  :current='userMsg.rate' @change='pingFen' active-icon='thumb-up-fill' inactive-icon='thumb-up-fill' class="DetailPing"></u-rate>
			<view class="">
				<u-avatar :src="userMsg.avatar" :size="80" :show-sex='true' mode="circle"
					:sex-icon="userMsg.gender==1?'man': userMsg.gender==0? 'woman':''"
					:show-level='userMsg.userLevel==1'></u-avatar>
				<view class="">
					<text> {{userMsg.username}} </text>
					<view>发布时间 {{userMsg.createTime}}</view>
					<view>阅读量 {{userMsg.eye}}</view>
				</view>
			</view>
			
		</view>
		<view class="ml-15">
			<rich-text :nodes="userMsg.title"></rich-text>
		<view class="" style="color:#2979ff;">
			{{cid}}
		</view>
		<view class="u-body-item ml-20">
			<image @tap='preAvatar(userMsg.imgUrl)' :src="userMsg.imgUrl" mode="aspectFit" style="width:500rpx;height: 400rpx;"></image>
			
		</view>
		<rich-text :nodes="userMsg.body"></rich-text>
		</view>
		<u-divider color="#62C26C">评论</u-divider>
		<view class="" v-for="(item,index) in taking" :key='index'>
			<view class="u-body-item u-flex u-col-center DetailMsg">	
				<view class="DetailPing u-row-right" style="font-size: 20rpx;">{{item.updateTime}} <u-button style="margin-left: 80rpx;" type="success" size="mini" :plain="true" @click="collection(item.id)">+ 收藏</u-button></view>
				<u-avatar :src="item.avatar" class="mt-15 " :size="80"  mode="circle"></u-avatar>
				<view class="u-line-1 u-m-l-15 u-m-t-10">
					<view class="u-body-item-title u-line-1">{{item.username}}</view>
					<view class="u-body-item-title u-line-1 u-m-t-10" style="width:60vw ;">{{item.body}}</view>
				</view>
			
			</view>
	         <view class="width-100 u-text-center">
	         	<image v-if="item.imgUrl" @tap='preAvatar(item.imgUrl)' :src="item.imgUrl" mode="aspectFit" style="width:300rpx;height: 200rpx;"></image>
	         </view>
		</view>
		<view class="detailFoot">
			<textarea type="text" class="mt-20" style="border: 1px dashed #ccc; width: 100vw; height: 200rpx;" v-model="postPing.body" @click="pShow=true"  placeholder="评论..." />
			<uploadFile v-if='pShow' @ping='getping' ></uploadFile>
			<button type="primary" v-if="pShow" @click="surePost">评论</button>
		</view>
		
	</view>
</template>

<script>
	import uploadFile from '@/components/uploadFile/uploadFile.vue'
	import {
		mixins
	} from '@/public.js'
	export default {
		name:'TopicDetail',
		mixins: [mixins],
		components: {
			uploadFile
		},
		created() {
			//this._m_gettitleMsg()
			
			this._m_getDetailCID(this.userMsg.cid)
			setTimeout(this.getLookNum(),5000)
			this.getToaking()
		},
		computed: {
			userMsg() {
				return uni.getStorageSync('item')
			},
			
		},
		data() {
			return {
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				pShow:false,
				title: {},
				cid:'',
				taking:[],
				postPing:{
					aid:'',
					body:'',
					imgUrl:'',
				},
				isgd:{
					target_uid:'',
					grade:''
				}
				
			}
		},
		methods: {
			preAvatar(avatar) {
				wx.previewImage({
					current: '', // 当前显示图片的 http 链接
					urls: [avatar] // 需要预览的图片 http 链接列表
				})
			},
			collection(commId){
				this._m_collection({commId:commId})
			},
			getping(url){
				this.postPing.imgUrl=url
			},
			getToaking(){//获得当前文章评论
				this.$api.getToaking({aid:this.userMsg.aid}).then(
				res=>{			
				    this.taking=res
				}
				)
			},
			surePost(){//发布评论
				this.postPing.aid=this.userMsg.aid
				this.$api.postPing(this.postPing).then(
				   res=>{
					   if(res!==0){
						   this.$refs.uToast.show({
							   duration:3000.,
							   title:'评论成功',
							   type:'success'
						   })
						   this.pShow=false
						   this.getToaking()
					   }
				   }
				)
			},
			getLookNum(){
				// 获得阅读量
				this.$api.getLookNum({aid:this.userMsg.aid}).then(
				res=>{
					console.log(res)
				}
				)
			},
			pingFen(value){//评分
				this.isgd.grade=value
				this.isgd.target_uid=this.userMsg.uid
				this.$api.goodUser(this.isgd).then(
				res=>{
					if(res!==0){
						this.$refs.uToast.show({
							duration: 3000,
							title: '评分成功',
							type: 'success',
						});
					}
				},
				err=>{
					console.log(err)
				}
				)
			}
		
			}
	}
</script>

<style lang="scss">
	.DetailMsg{
		position: relative;
		.DetailPing{
			position: absolute;
			width: 100px;
			top: 30rpx;
			right: 50rpx;
		}
		.detailFoot{
			position: fixed;
			bottom: 0;
		}
		
	}
	.bg {
		background-color: #F5F8F7;
	}

	.bgfff {
		background-color: #fff;
	}

	.TopicChose {
		height: 90vh;
	}
</style>
